<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>体检信息录入系统</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        h1, h2, h3 {
            color: #333;
        }
        
        #top {
            display: flex;
            width: 100%;
            padding-right: 50px;
            align-items: center;
        }
        
        #top h2 {
            margin-right: 20px;
        }
        
        #top button {
            margin-left: 20px;
            padding: 5px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .border {
            border: 2px solid #ddd;
            width: 100%;
            border-radius: 3px;
            margin-bottom: 10px;
            padding: 10px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            font-size: 14px;
        }
        
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        input[type="text"], textarea {
            width: 100%;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        textarea {
            height: 60px;
            resize: vertical;
        }
        
        button[type="submit"] {
            padding: 6px 12px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        /* 可隐藏区域样式 */
        .toggle-section {
            margin: 15px 0;
        }
        
        .toggle-input {
            display: none;
        }
        
        .toggle-label {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background: #3498db;
            color: white;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .toggle-label:after {
            content: "▼";
            margin-left: 10px;
            transition: transform 0.3s;
        }
        
        .toggle-input:checked + .toggle-label:after {
            transform: rotate(180deg);
        }
        
        .toggle-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #f9f9f9;
            border-radius: 0 0 4px 4px;
        }
        
        .toggle-input:checked ~ .toggle-content {
            max-height: 2000px;
            padding: 15px;
            transition: max-height 0.5s ease-in;
        }
    </style>
</head>
<body>
    <div>
        <h1>体检信息录入</h1>
        <form>
            <div id="top">
                <h2>体检客户查询</h2>
                <button type="button">查询</button>
            </div>
            <div class="border">
                订单编号：<input type="text" placeholder="输入体检编号">
            </div>
        </form>
        
        <div class="border">
            <h2>客户基本信息</h2>
            <table>
                <tr>
                    <th>订单编号</th>
                    <td>暂无信息</td>
                    <th>手机号码</th>
                    <td>暂无信息</td>
                    <th>姓名</th>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td>暂无信息</td>
                    <th>套餐类型</th>
                    <td>暂无信息</td>
                    <th>体检日期</th>
                    <td>暂无信息</td>
                </tr>
            </table>
        </div>
        
        <div class="toggle-section">
            <input type="checkbox" id="toggle1" class="toggle-input">
            <label for="toggle1" class="toggle-label">一般检查项目</label>
            <div class="toggle-content">
                <table>
                    <tr>
                        <th>身高</th>
                        <td><input type="text" placeholder="输入身高"></td>
                        <th>体重</th>
                        <td><input type="text" placeholder="输入体重"></td>
                    </tr>
                    <tr>
                        <th>体重指数</th>
                        <td><input type="text" placeholder="输入体重指数"></td>
                        <th>脉搏</th>
                        <td><input type="text" placeholder="输入脉搏"></td>
                    </tr>
                    <tr>
                        <th>收缩压</th>
                        <td><input type="text" placeholder="输入收缩压"></td>
                        <th>舒张压</th>
                        <td><input type="text" placeholder="输入舒张压"></td>
                    </tr>
                </table>
                
                <div>
                    <h3>科室小结</h3>
                    <table>
                        <tr>
                            <th>科室小结</th>
                            <td><textarea></textarea></td>
                        </tr>
                    </table>
                </div>
                
                <div>
                    <h3>责任医师</h3>
                    <table>
                        <tr>
                            <th>录入医师</th>
                            <td><input type="text" placeholder="输入医师姓名"></td>
                            <td><button type="submit">保存</button></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="toggle-section">
            <input type="checkbox" id="toggle2" class="toggle-input">
            <label for="toggle2" class="toggle-label">视力检查</label>
            <div class="toggle-content">
                <table>
                    <tr>
                        <th>左眼视力</th>
                        <td><input type="text" placeholder="输入左眼视力"></td>
                        <th>右眼视力</th>
                        <td><input type="text" placeholder="输入右眼视力"></td>
                    </tr>
                    <tr>
                        <th>矫正视力(左)</th>
                        <td><input type="text" placeholder="输入矫正视力"></td>
                        <th>矫正视力(右)</th>
                        <td><input type="text" placeholder="输入矫正视力"></td>
                    </tr>
                </table>
                
                <div>
                    <h3>科室小结</h3>
                    <table>
                        <tr>
                            <th>科室小结</th>
                            <td><textarea></textarea></td>
                        </tr>
                    </table>
                </div>
                
                <div>
                    <h3>责任医师</h3>
                    <table>
                        <tr>
                            <th>录入医师</th>
                            <td><input type="text" placeholder="输入医师姓名"></td>
                            <td><button type="submit">保存</button></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
		
		
		
		
		<div class="toggle-section">
		    <input type="checkbox" id="toggle3" class="toggle-input">
		    <label for="toggle3" class="toggle-label">血常规24项</label>
		    <div class="toggle-content">
		    血常规24项录入
			</div>
			</div>
			
			<div class="toggle-section">
			    <input type="checkbox" id="toggle4" class="toggle-input">
			    <label for="toggle4" class="toggle-label">肝功能四项</label>
			    <div class="toggle-content">
			肝功能四项录入
				</div>
				</div>
		<div class="toggle-section">
		    <input type="checkbox" id="toggle5" class="toggle-input">
		    <label for="toggle5" class="toggle-label">肾功能三项</label>
		    <div class="toggle-content">
		肾功能三项录入
			</div>
			</div>
			<div class="toggle-section">
			    <input type="checkbox" id="toggle6" class="toggle-input">
			    <label for="toggle6" class="toggle-label">血脂四项</label>
			    <div class="toggle-content">
			血脂四项录入
				</div>
				</div>
				<div class="toggle-section">
				    <input type="checkbox" id="toggle7" class="toggle-input">
				    <label for="toggle7" class="toggle-label">尿常规二十四项</label>
				    <div class="toggle-content">
				尿常规二十四项录入
					</div>
					</div>
					
		<div class="toggle-section">
		    <input type="checkbox" id="toggle8" class="toggle-input">
		    <label for="toggle8" class="toggle-label">颈动脉彩超</label>
		    <div class="toggle-content">
		颈动脉彩超
			</div>
			</div>
			
    </div>
</body>
</html>